<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head><title>Sized</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
    <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
</head>

<body>
    <h1>Sized</h1>
    <div class="main_body">
        <div class="main_left">
            <span class="box_title">Positioned Grandparent Left</span><br /><code>height:auto;</code> If you size the <code>height</code> of this box, it will not expand
            to fit the contained box, "Non-positioned Parent", when you expand it by adding more text.

            <div class="parent">Non-positioned Parent Left
                <div id="float_id" class="box_base"><span class="box_title">Sized Float 1</span><br /><code>float:right</code></div>
                <div id="static_id" class="box_base">
                    <span class="box_title">Sized Static (block box) 2</span><br /><code>position:static</code><br />
                    <code>width</code> and <code>height</code> applies to TEXT AREA only.
                </div>
                <table id="table_id" class="box_base">
                    <tr>
                        <td>
                            <span class="box_title">Sized Table 3</span><br />
                            <code>width</code> and <code>height</code> INCLUDES <code>border</code> and <code>padding</code>.
                        </td>
                    </tr>
                </table>
                <span id="absolute_box_id" class="box_base">
                    <span class="box_title">Sized Absolute 4</span><img id="star"   src="star.gif" alt="star" />
                </span>  
            </div>
        </div>

        <div class="main_col_1">
            Blah blah blah Blah blah blah
            <br />
            <br />
            <br />
            <br />
            <br />

            <div class="main_right">
                <span class="box_title">Positioned Grandparent Right</span>
                <div class="parent">Non-positioned Parent Right
                    <div id="float_id" class="box_base"><span class="box_title">Sized Float 1</span><br /><code>float:right</code></div>
                    <div id="static_id" class="box_base">
                        <span class="box_title">Sized Static (block box) 2</span><br /><code>position:static</code><br />
                        <code>width</code> and <code>height</code> applies to TEXT AREA only.
                    </div>
                    <table id="table_id" class="box_base">
                        <tr>
                            <td>
                                <span class="box_title">Sized Table 3</span><br />
                                <code>width</code> and <code>height</code> INCLUDES <code>border</code> and <code>padding</code>.
                            </td>
                        </tr>
                    </table>
                    <span id="absolute_box_id" class="box_base">
                        <span class="box_title">Sized Absolute 4</span><img id="star"   src="star.gif" alt="star" />
                    </span>  
                </div>
            </div>

        </div>

    </div> <!-- main_body -->
</body>
</html>
